<extend name="common/base" />
<block name="resource">
    <link href="__ASSET__/Home/v4/src/css/explore.css" rel="stylesheet">
    <link href="__ASSET__/Home/v4/src/css/home.css" rel="stylesheet">
    <!--[if lt IE 9]>
    <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style>
      .other-event-rec-news{
          width:290px;
       }
       .other-event-rec-news .hot-video-li{
          width:290px;
          overflow:hidden;
          position:relative;
       }
       .other-event-rec-news .hot-video-li .video_play{
           position:absolute;
           z-index:100;
           left:0;
           top:0;
           width:100%; 
       }
       .other-event-rec-news .hot-video-li .hot-video a{
          display:block;
       }
       .other-event-rec-news .hot-video-li .item-play{
          overflow:hidden;
          width:290px;
          height:164px;
          vertical-align: middle;
           text-align: center;
          display: table-cell;
       }
       .other-event-rec-news .hot-video-li .item-play img{
            width: auto;
            height: auto;
            margin: auto;
            position: static;
            max-width: 100%;
            max-height: 100%;
       }
    </style>
</block>
<block name="content">
    <div class="new-bg paddingtb20 match-desc-video">
        <div class="container paddingtb20 ">
            <!--官方公告-->
            <div class="match-main-left white-bg left">
                <div class="main-right-box">
                    <h1 class="font12 colorthree">
                        <p class="h1-left left">
                           <span class="hot <if condition="$type neq 0">active</if>" title="热门赛事">
                              <a href="/notice"><b>官方公告</b></a>
                            </span>
                            <span class="pre <if condition="$type eq 0">active</if>" title="赛事预告">
                               <a href="/news"><b>新闻资讯</b></a>
                            </span>
                        </p>
                    </h1>
                    <input type="hidden" value="{$type}"  name="new_type">
                    <notempty name="list">
                    <ul class="match-smell-list new-list" id="new_list_info">
                        <volist name="list" id="n">
                            <if condition="$type eq 0">
                                <li class="display-box" style="border-bottom: none;">                    
                                    <p class="match-smell-listpic left">
                                      <a href="/news-{$n.id}" title="{$n.title}">
                                        <empty name="n.cover">
                                               <img src="__ASSET__/Home/v4/src/images/m_defaut.jpg" data-original="__ASSET__/Home/v4/src/images/m_defaut.jpg" class="lazy" alt="{$n.title}"/>
                                            <else/>   
                                               <img src="__ASSET__/Home/v4/src/images/m_defaut.jpg" data-original="{$n.cover}" class="lazy" alt="{$n.title}"/>
                                        </empty> 
                                      </a> 
                                    </p>
                                    <p class="match-smell-listrg left">
                                        <span class="match-smell-listname font14">
                                          <a href="/news-{$n.id}" title="{$n.title}" class="colorthree textover">{$n.title}</a>
                                        </span>
                                        <span class="match-smell-listcon font12 colorsix">
                                          <a href="/news-{$n.id}" title="{$n.detail}">{$n.detail}</a>
                                        </span>
                                        <span class="match-smell-listtime font12 colorsix">发表于 {$n.create_time|date="Y-m-d",###}</span>
                                    </p>      
                                </li>
                            <else />
                                <li style="padding: 10px 10px 20px;">
                                    <p class="font14 new-name">
                                        <a href="/news-{$n.id}" class="textoverflow colorthree">{$n.title}</a>
                                    </p>
                                    <p class="font12 new-desc whitespace">
                                       <a href="/news-{$n.id}" class="textoverflow colorsix"> {$n.detail}</a>
                                    </p>
                                    <p class="font12 colorsix new-time">发表于 {$n.create_time|date="Y-m-d",###}</p>
                                    
                                </li>
                            </if>
                        </volist>
                    </ul>
                    <!--分页-->
                    <div class="page">
                        <ul>
                        </ul>
                    </div>
                    <div class="load-more" style="display:none;">
                         <i><img src="__ASSET__/Home/v4/src/images/loading-white.gif" alt="正在加载，请稍候..."/></i>
                         <span>正在加载，请稍候...</span>
                    </div>
                    <else />
                        <!--类null-state为空状态-->
                        <div class="content-right-item-null">
                            <div class="null-img"></div>
                            <div class="null-info font16">暂时没有{$title}</div>
                        </div>
                    </notempty>
                </div>
            </div>
            <!--右边-->
            <div class="match-main-right right">
                <!--热门视频-->
                <div class="hotvideo white-bg">
                    <h1 class="font12 colorthree">
                        <span class="left">热门视频</span>
                    </h1>
                    <ul class="other-event-rec other-event-rec-news">
                        <volist name="videos" id="video">
                            <li class="hot-video-li">
                                <div class="hot-video">
                                    <a href="/video-{$video.id}">
                                        <div class="item-play dark-bg" data-video="{$video.pre_uri}">
                                            <img src="{$video.thumb|default='__ASSET__/Home/v4/src/images/bg-mr.png'}" alt="{$video.title}" />
                                        </div>
                                        <p class="item-title font13 colorthree">{$video.title}</p>
                                        <div class="item-infos font12">
                                            <span class="author left">
                                                <i class="author-images"></i>
                                                <label class="author-name">{$video.user.nickname}</label>
                                            </span>
                                            <span class="times right">
                                                <i class="times-images"></i>
                                                <em class="times-num" title="播放{$video.statis.play}次">{$video.statis.play}</em>
                                            </span>
                                        </div>
                                    </a>
                                </div>
                            </li>
                        </volist>
                    </ul>
                </div>
                <!--活跃用户-->
                <div class="recommend colorthree white-bg">
                    <h1 class="font12">
                        <span class="left">活跃用户</span>
                    </h1>
                    <ul class="active-users-ul active-users-ul-contain"> 
                    </ul>
                </div>
            </div>
        </div>

    </div>
</block>
<block name="component">
    <script src="__ASSET__/Home/v4/lib/js/date_format.js"></script>
    <script src="__ASSET__/Home/v4/dist/js/HDvideo.js"></script>
    <script src="__ASSET__/Home/v4/src/js/active_user.js"></script>
    <script src="__ASSET__/Home/v4/src/js/news_list.js"></script>
    <script type="text/javascript">
        var img = new Image();
        img.src = _COMMON.public_url + "/Home/v4/src/images/new_default.jpg";
        $('.new-bg').css({
              'background':'url('+img.src+') center top no-repeat #000',
              'backgroundSize': 'contain',
        });
        window._THIS = {
            detail_url : "/news-",
            total : {$news_count},
            pager : {$pager},
            new_list:"/news-ajaxList",
            getUser:"{:U('api/top/user')}",
            other:"/user-",
            unfollow:"{:U('follow/unfollow')}",
            dofollow:"{:U('follow/dofollow')}"
        };
        $("img.lazy").lazyload({
            effect: "fadeIn",
            threshold :180,
        })
    </script>

</block>




